<script lang="ts" setup>
// 组件
import CollapseTransition from "./CollapseTransition.vue";

export interface Props {
  title: string;
  isPadding?: boolean;
  background?: string;
}

const props = withDefaults(defineProps<Props>(), {
  title: "",
  isPadding: true,
  background: "#f7f8fa",
});

const expanded = ref(false);

const getClassName = () => {
  let className = `bg-[${props.background}] `;
  if (props.isPadding) {
    className += "px-[8px] ";
  }
  return className;
};
</script>

<template>
  <div>
    <div class="coollapse">
      <span
        :class="getClassName()"
        class="coollapse-head"
        @click="expanded = !expanded"
      >
        <i
          :class="expanded ? 'isExpanded' : ''"
          class="iconfont icon_arrow_down"
        ></i>
        <span :title="props.title">{{ props.title }}</span>
      </span>
      <CollapseTransition>
        <div
          v-show="expanded"
          :class="props.isPadding ? 'p-[16px]' : 'px-[0]'"
          class="coollapse-content"
        >
          <slot></slot>
        </div>
      </CollapseTransition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.coollapse {
  width: 100%;
  margin-bottom: 8px;
  background: #f7f8fa;

  &-head {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;

    > i {
      transition: all 0.3s;
      transform: rotate(-90deg);
    }

    .isExpanded {
      transform: rotate(0deg);
    }

    > span {
      margin-left: 8px;
      font-family: PingFangSC-Regular, "PingFang SC";
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #222;
    }
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
  }
}
</style>
